<template>
  <div>
    <table class="table table-bordered table-hover" v-show="datas.length">
      <thead>
        <tr>
          <th>用户id</th>
          <th>用户名</th>
          <th>邮箱</th>
          <th>家庭住址</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tbody" >
        <tr v-for="(data,index) in datas" :key="data.id" :ref="index">
          <td>{{data.id}}</td>
          <td contenteditable="true">{{data.name}}</td>
          <td contenteditable="true">{{data.email}}</td>
          <td contenteditable="true">{{data.address}}</td>
          <td>
            <button class="btn btn-danger" @click="del(data.id)">删除</button>
          <button class="btn btn-primary" @click="updateConfirm(data,index)">确认修改</button></td>
        </tr>
      </tbody>

    </table>
    <div class="tip" v-if="!datas.length">数据加载中....请稍后.....</div>

  </div>
</template>

<script>

export default {
  name: 'ListData',
  props: {
    datas: {
      type: Array
    }
  },
  methods: {
    del (id) {
      this.$emit('deleteData', id)
    },
    async updateConfirm (data, index) {
      const tr = this.$refs[index][0]
      const tds = tr.getElementsByTagName('td')
      data.name = tds[1].innerText
      data.email = tds[2].innerText
      data.address = tds[3].innerText

      this.$emit('updateData', data)
    }
  }
}
</script>

<style lang="less" scoped>
.tip {
  text-align: center;
  font-size: 30px;
  color: orange;
}
</style>
